<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()

const openKeys = ref(['/ticketManage'])
const selectedKeys = ref(['/ticketSearch'])
const routeList = router.getRoutes().find(item => item.name === '12306')?.children

watch(
  route,
  (newVal) => {
    openKeys.value = newVal.matched.slice(0, -1).map(route => route.path)
    selectedKeys.value = [newVal.path]
  }
)

const state = reactive({
  collapse: false
})

const toggleCollapse = () => {
  state.collapse = !state.collapse
}
</script>

<template>
  <el-scrollbar>
    <el-menu
      :default-openeds="openKeys"
      v-model:selected-keys="selectedKeys"
      mode="vertical"
      unique-opened
      :collapse="state.collapse"
    >
      <el-sub-menu v-for="item in routeList" :key="item.path" :index="item.path">
        <template #title>
          <el-icon :class="{'collaspe-icon': state.collapse}" :type="item.icon"></el-icon>
          {{ item.name }}
        </template>
        <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
          <router-link :to="child.path">{{ child.name }}</router-link>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
    <el-button @click="toggleCollapse" type="text">{{ state.collapse ? '展开' : '收起' }}</el-button>
  </el-scrollbar>
</template>

<style scoped lang="scss">

</style>